<extend name="desktop_default/template/base_index2" />

<block name="area_header">

	<style type="text/css">
		.all {
			width:70%;
			background-color: #F5F5F5;
			margin-left: 25%;
		}
		.tp {
			width: 50%;
			margin: 0 auto;
			padding: 80px;
		}
		.all font {
			margin-left: 40px;
		}

		.tab {
			padding: 30px;
		}
		.tabs {
			height: 466px;
			padding: 30px;
			background-color: #FFFFFF;
		}
		body{background-color: #F5F5F5;}
		.all a {
			color: #000000;
		}
		.all a:hover {
			color: orangered;
		}
		.sed {
			color: orangered;
		}
		.am-tab-panel {
			background-color: #FFFFFF;
		}
		.mm {
			margin-top: 32px;
			margin-left: 110px;
		}
		.headimg {
            position: relative;
			float: left;
			font-size: 12px;
			margin-top: 130px;
			margin-left: 100px;
		}
		.tabs-right {
			width: 60%;
			float: right;
			padding: 10px;
		}
		.tabs-right button{float: right;}
		.info{  }
		.info table{margin: 0 auto;}
		.info table tr td{padding: 10px;}
        .headimg .am-icon-edit{
            position: relative;
            width: 60px;
            height: 60px;
            top: 30px;
            left: 30px;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
        }
        .headimg .am-icon-edit{
            position: absolute;
            height: 60px;
            width: 60px;
            border-radius: 50%;
            display: none;
        }
        .headimg:hover .am-icon-edit{
            display: block;
        }
        .headimg .am-icon-edit:before {
            line-height: 30px;
            height: 30px;
            width: 30px;
            text-align: center;
            top: 15px;
            position: absolute;
            left: 16px;
            color: #fff;
            font-size: 20px;
        }
        .am-modal-dialog{
            background: #fff;
        }
        .am-modal-dialog label{
            color: #333;
            line-height: 40px;
        }
        .am-modal-dialog .am-radio-inline input {
            height: 30px;
        }
	</style>
    <script type="text/javascript" ></script>
</block>

<block name="area_body">
	<include file="desktop_default/width/right" />
	<include file="desktop_default/width/top"/>
	<div class="container">
		{:W('Partials/nav_group')}
	</div>
	<div class="shop-container" style="background: white;">
		<a href="{:U('Shop/User/index')}"><img height="70px" style="margin-left: -3px; margin-top: -5px;" src="__IMG__/userinfo.png"></a>
		<font color="#8C8C8C">个人信息很重要哦!</font>
	</div>
		<div class="shop-container am-cf">
		<div class="div_left" >
			<include file="desktop_default/width/list"/>
		</div><br>
		<div class="all">
			<div class="tabs">
				<div class="headimg">
                    <empty name="user['head']">
                        <a  class="js_avatar" href="{:U('Shop/Avatar/upload')}"><i class="am-icon-edit"></i><img class="avatar" src="__IMG__/head.jpg"/></a>
                        <else/>
                        <a class="js_avatar" href="{:U('Shop/Avatar/upload')}"><i class="am-icon-edit"></i><img  class="avatar" src="{$user['head']}" /></a>
                    </empty>
                    <div  style="width: 120px;" class="am-text-center am-margin-top-sm">
                    <a href="{:U('Shop/Avatar/upload')}">设置头像</a>
                    </div>
                </div>
				<div class="tabs-right">
					<font size="3">基本资料</font>
					<a href="javascript:void(0)"  data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 480, height: 460}"> <font size="2" color="#0055AA" style="float: right;"><i class="am-icon-pencil"></i>编辑</font></a>
					<hr> 昵称：<if condition="$user['nickname'] eq ''">未设置<else/>{$user['nickname']}</if>
					<hr> 生日：<if condition="$user['birthday'] eq 0">未设置<else/>{$user.birthday|date='Y-m-d',###}</if>
					<hr> 性别：<if condition="$user['sex'] eq 0">女</if><if condition="$user['sex'] eq 1">男</if>
					<hr> 绑定手机：{$phone}
                    <!--<button type="" data-am-modal="{target: '#doc-modal-2', closeViaDimmer: 0, width: 400, height: 260}" class="am-btn-warning">更换验证手机</button>-->
					<hr>
				</div>
			</div>

		</div>
		</div>
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">修改用户信息
				<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
			</div>
            <hr/>
			<div class="am-modal-bd">
				<div class="info">
				<form class="fms" method="post" >
						<input type="hidden" name="uid" id="uid" value="{$user['uid']}" />

                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-sm-3">昵称</label>
                        <div  class="am-u-lg-10 am-u-sm-9">
                            <input type="text" class="am-form-field"  name="nickname" id="nickname" value="{$user['nickname']}" />
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-sm-3">生日</label>
                        <div class="am-u-lg-10 am-u-sm-9">
                            <input type="date" class="am-form-field" placeholder="生日" data-am-datepicker   name="birthday" id="birday" value="{$user.birthday|date='Y-m-d h:i:s',###}" />
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <label class="am-u-lg-2 am-u-sm-3">性别</label>
                        <div class="am-form-group am-u-lg-10 am-u-sm-9 am-text-left">
                            <label class="am-radio-inline">
                                <input type="radio" name="sex" value="1" <eq name="user['sex']" value="1">checked</eq> >男
                            </label>
                            <label class="am-radio-inline">
                                <input type="radio" name="sex" value="0"  <eq name="user['sex']" value="0">checked</eq> >女
                            </label>
                        </div>
                    </div>
                     <div>
                    <button url="{:U('Shop/User/edit')}" target-form="fms" type="submit" class="ajax-post am-btn am-btn-primary"><i class="am-icon-save am-margin-right-sm"></i>保存</button>

                     </div>
				</form>
				</div>
			</div>
		</div>
	</div>
	<!--更换手机-->
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-2">
		<div class="am-modal-dialog">
			<div class="am-modal-hd"><font color="orangered">更换认证手机</font>
				<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
			</div>
			<div class="am-modal-bd">
				<form class="ghmobile" method="post">
				<div style="text-align: left; margin-left: 80px;">
					<form class="tomes" method="post">
					<input type="hidden" name='mobile' value="{$mobile}" />
					</form>
				原手机：{$phone}<button type="button" url="{:U('Shop/User/toMessage')}" target-form="tomes"  class="ajax-post am-btn-warning tomessage">获取验证码</button><br><br>
				验证码：<input type="text" name="code" /><br><br>
				新手机：<input type="tel" name="newmobile"/><br><br>
				<button url="{:U('Shop/User/checkCode')}" target-form="ghmobile" type="button" style="margin-left: 80px;" class="ajax-post am-btn-primary">保存</button>
				</div>
				</form>
			</div>
		</div>

	</div>



	 <include file="desktop_default/width/floor" />
    <include  file="desktop_default/partial/avatar" />

</block>

<block name="area_footer">
	<script type="text/javascript">
	$(function(){
		$('.tomessage').click(function(){
		})
		
	})
	</script>
</block>